import React from 'react';
import { Modal, Input } from 'antd';
import EmptyData from '@/components/EmptyData/EmptyData.js'
import './AssignModal.less'

const AssignModal = (props) => (
  <Modal
    width={780}
    title="News Preview"
    visible={props.showAssignModal}
    onCancel={props.assignCancel}
    footer={null}
    centered>
    <div className="list-table">
      <ul className="table-header">
        <li className="header-item">Account</li>
        <li className="header-item">Remains</li>
        <li className="header-item">Number</li>
        <li className="header-item">Operation</li>
      </ul>
      {
        props.dataSource.length !== 0 ? props.dataSource.map((item, index) => {
          return (
            <ul className="table-container" key={index}>
              <li className="container-item">{item.authUserName}</li>
              <li className="container-item">{item.remains}</li>
              <li className="container-item">
                <Input
                  value={item.remains}
                  onChange={(e) => props.valueOnChange(e, index)} />
              </li>
              <li className="container-item edit-config">
                <span className="edit-text">Assign</span>
              </li>
            </ul>
          )
        })
        :
        <EmptyData />
      }
    </div>
  </Modal>
)

export default AssignModal
